import React, { Component } from 'react'
import { Table, Pagination, Space, message } from 'antd';

import { RequestUserListPage } from "../../api/UserApi";
import { baseURL } from "../../api/request";
import  DataUtil from "../../utils/DataUtil";

const columns = [
    {
        title: '序号',
        dataIndex: 'uid',

    },
    {
        title: '名称',
        dataIndex: 'username',
     
    },
    {
        title: '头像',
        dataIndex: 'headerimg',
        render: (text, record) => (
            text ? <img width='80' height='80' src={baseURL + text} alt='头像' /> : <img width='80' height='80' src={require('../../assets/images/y.jpg')} alt='头像' />
        )
    },
    {
        title: '性别',
        dataIndex: 'sex',
        render: (text)=>(
            text==1?<span>男</span>:<span>女</span>
        )
    },
    {
        title: '年龄',
        dataIndex: 'age',
    },
    {
        title: '目的',
        dataIndex: 'visitgoal',
    },
    {
        title: '到访时间',
        dataIndex: 'visittime',
        render: function (text) {
            return  DataUtil.formatDate.format(
                new Date(text),
                "yyyy-MM-dd hh:mm:ss"
              )
        }
    },
    {
        title: '学历',
        dataIndex: 'education',
    },
    {
        title: '单位',
        dataIndex: 'company',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <a>编辑</a>
                <a>删除</a>
            </Space>
        ),
    },
];

export default class list extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pagination: {
                current: 1,
                pageSize: 5,
            },
            loading: false,
            total:0,
            totalNum:0
        }
    }
    componentDidMount(){
        this.onRequestUserList();
    }
    onRequestUserList() {
        const { pagination } = this.state;
        this.setState({ loading: true })
        RequestUserListPage(pagination.current, pagination.pageSize).then(res => {
            console.log(res);
            if(res.resultCode == 1){
                this.setState({
                    data: res.resultInfo.list,
                    loading: false,
                    total:res.resultInfo.total,
                    totalNum:res.resultInfo.totalNum
                })
            }
            
        }).catch(err=>{
            message.info('请求出错! '+err);
        })
    }

    render() {
        const { total,totalNum,data, pagination, loading } = this.state;
        return (
            <div>
                <Table bordered  columns={columns} dataSource={data}  loading={loading}  pagination={false}/>
                <Pagination
                    style={{marginTop:'20px'}}
                    total={total}
                    pageSizeOptions={[5,10,20,50,100]}
                    defaultPageSize={5}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共 ${total} 条`}
                    onChange={this.onChange.bind(this)}
                    onShowSizeChange={this.onShowSizeChange.bind(this)}
                   
                />
            </div>
        )
    }
    onChange(page, pageSize){
        this.state.pagination.pageSize = pageSize;
        this.state.pagination.current = page;
        this.onRequestUserList();
    }
    onShowSizeChange(current, size){
        this.state.pagination.pageSize = size;
        this.state.pagination.current = current;
        this.onRequestUserList();
    }
}
